<template>
  <div class="pie" :id="`area${id}`"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'MiniArea',
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    color: String
  },
  data() {
    return {
      id: Math.random() * new Date().getTime()
    };
  },
  mounted() {
    this.$nextTick(() => {
      const chartDom = document.getElementById('area' + this.id);
      const myChart = echarts.init(chartDom);

      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          top: '3%',
          left: '2%',
          right: '4%',
          bottom: '4%'
        },
        series: [
          {
            data: this.data,
            type: 'line',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1.3,
                colorStops: [{
                    offset: 0, color: this.color // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }]
              }
            },
            lineStyle: {
              opacity: 0
            },
            symbolSize: 0,
            smooth: true
          }
        ]
      };

      option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
